<template>
  <el-main>
    <el-alert title="感谢百度Echarts组件, SCUI经过封装后在VUE里使用更方便而且暴露Echarts所有方法,具体请查看本文件" type="success" style="margin-bottom:20px;"></el-alert>
    <el-row :gutter="15">
      <el-col :lg="8">
        <el-card shadow="never">
          <Echarts height="300px" :option="option"></Echarts>
        </el-card>
      </el-col>
      <el-col :lg="8">
        <el-card shadow="never">
          <Echarts height="300px" :option="option2"></Echarts>
        </el-card>
      </el-col>
      <el-col :lg="8">
        <el-card shadow="never">
          <Echarts height="300px" :option="option3"></Echarts>
        </el-card>
      </el-col>
      <el-col :lg="8">
        <el-card shadow="never">
          <Echarts height="300px" :option="option4"></Echarts>
        </el-card>
      </el-col>
      <el-col :lg="8">
        <el-card shadow="never">
          <Echarts height="300px" :option="option5"></Echarts>
        </el-card>
      </el-col>
      <el-col :lg="8">
        <el-card shadow="never">
          <Echarts height="300px" :option="option6"></Echarts>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
import Echarts from '@/views/vab/echarts/components/index.vue';

/**
 * 引入组件 @/views/vab/echarts/components/index.vue
 * 组件内部会自动加载主题 echarts-theme-T.js
 * 支持props包括 height，width，option
 * 组件export百度Echarts所有方法，使用方式: new Echarts[fun]
 */

export default {
  name: 'chart',
  components: {
    Echarts
  },
  data() {
    return {
      option: {
        title: {
          text: 'Bar Demo',
          subtext: '基础柱状图',
        },
        grid: {
          top: '80px'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          barWidth: '15px',
        },
          {
            data: [110, 180, 120, 120, 60, 90, 110],
            type: 'bar',
            barWidth: '15px',
          }]
      },
      option2: {
        title: {
          text: 'Line Demo',
          subtext: '基础折线图',
        },
        grid: {
          top: '80px'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'line',
        },
          {
            data: [110, 180, 120, 120, 60, 90, 110],
            type: 'line',
          }]
      },
      option3: {
        title: {
          text: 'Pie Demo',
          subtext: '基础饼图',
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '60%'],
            label: false,
            data: [
              {value: 1048, name: '搜索引擎'},
              {value: 735, name: '直接访问'},
              {value: 580, name: '邮件营销'},
              {value: 484, name: '联盟广告'},
              {value: 300, name: '视频广告'}
            ]
          }
        ]
      },
      option4: {
        title: {
          text: 'Radar Demo',
          subtext: '基础雷达(属性)图',
        },
        tooltip: {
          trigger: 'item'
        },
        radar: {
          radius: 100,
          center: ['50%', '55%'],
          indicator: [
            { name: '销售', max: 100},
            { name: '管理', max: 100},
            { name: '信息技术', max: 100},
            { name: '客服', max: 100},
            { name: '研发', max: 100},
            { name: '市场', max: 100}
          ]
        },
        series: [{
          name: "SCUI",
          type: 'radar',
          areaStyle: {},
          data: [
            {
              value: [74, 90, 95, 65, 80, 31],
            }
          ]
        }]
      },
      option5: {
        title: {
          text: 'Kline Demo',
          subtext: '基础K线图',
        },
        grid: {
          top: '80px'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          data: ['2017-10-23', '2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27', '2017-10-28', '2017-10-29', '2017-10-30'],
        },
        yAxis: {
          scale: true,
        },
        series: [{
          type: 'k',
          data: [
            [2213.19,2199.31,2191.85,2224.63],
            [2203.89,2177.91,2173.86,2210.58],
            [2170.78,2174.12,2161.14,2179.65],
            [2179.05,2205.5,2179.05,2222.81],
            [2212.5,2231.17,2212.5,2236.07],
            [2227.86,2235.57,2219.44,2240.26],
            [2242.39,2246.3,2235.42,2255.21],
            [2246.96,2232.97,2221.38,2247.86]
          ]
        }]
      },
      option6: {
        title: {
          text: 'Gauge Demo',
          subtext: '基础仪表盘',
        },
        series: [{
          center: ['50%', '60%'],
          type: 'gauge',
          anchor: {
            show: true,
            showAbove: true,
            size: 20,
            itemStyle: {
              borderWidth: 5
            }
          },
          progress: {
            show: true
          },
          data: [{
            value: 70
          }]
        }]
      }
    }
  }
}
</script>

<style>
</style>
